<link rel="stylesheet" href="assets/css/mycss.css">
<div class="main-container" id="main-container"
	xmlns:th="http://www.thymeleaf.org">
	<div class="main-container-inner">
		<div class="main-content">
			<div class="page-content">
				<div class="row">
					<form class="form-horizontal" role="form" id="add_form">
						<h5 style="padding-left: 10px; color: blue">基本信息</h5>
						<hr />
						<div class="col-md-12 clearfix">
							<div class="form-group col-md-6">
								<label for="dvalue" class="col-sm-4 control-label">所属租户</label>
								<div class="col-sm-7">
								   
									<select class="form-control" id="rentCode" name="rentCode">
									</select>
								</div>
							</div>
							<div class="form-group col-md-6">
								<label for="dvalue" class="col-sm-3 control-label">所属机构</label>
								<div class="col-sm-7">
									<select class="form-control" id="orgCode" name="orgCode">
									</select>
								</div>
							</div>
						</div>
						<div class="col-md-12 clearfix">
							<div class="form-group col-md-6">
								<label for="dtype" class="col-sm-4 control-label">服务器名称</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" id="serverName"
										name="serverName" />
								</div>
							</div>
							<div class="form-group col-md-6">
								<label for="dname" class="col-sm-3 control-label">服务器IP</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" id="serverIp"
										name="serverIp" />
								</div>
							</div>
						</div>
						<div class="col-md-12 clearfix">
							<div class="form-group col-md-6">
								<label for="dvalue" class="col-sm-4 control-label">服务器类型</label>
								<div class="col-sm-7">
									<select class="form-control" id="serverType" name="serverType">
									</select>
								</div>
							</div>
							<div class="form-group col-md-6">
								<label for="dvalue" class="col-sm-3 control-label">连接类型</label>
								<div class="col-sm-7">
									<select class="form-control" id="linkType" name="linkType">
									</select>
								</div>
							</div>
						</div>
						<div class="col-md-12 clearfix">
							<div class="form-group col-md-6">
								<label for="dvalue" class="col-sm-4 control-label">连接端口</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" id="linkPort", name="linkPort">
								</div>
							</div>
						</div>
						<h5 style="padding-left: 10px; color: blue">
							用户信息<span style="margin-left: 10px; color: lightgray">(服务监听模式下可以省略密码)</span>
						</h5>
						<hr />
						<div id="userDiv">
							<div class="form-group">
								<label for="dvalue" class="col-sm-2 control-label">用户名</label>
								<div class="col-sm-3">
									<input type="text" class="form-control" name="username">
								</div>
								<label for="dvalue" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-3">
									<input type="text" class="form-control" name="userpwd">
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-10"></label>
							<div class="col-sm-1">
								<a class="btn btn-primary" onclick="addUser()"><i
									class="glyphicon-plus"></i></a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="assets/js/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="assets/js/validate/additional-methods.min.js"></script>
<script type="text/javascript" src="assets/js/validate/localization/messages_zh.min.js"></script>
<script type="text/javascript" src="assets/js/comm.js"></script>
<script type="text/javascript">
	Dic.fillSelect("server_type", "#serverType");    
	Dic.fillSelect("link_type", "#linkType");  
	$("#rentCode").change(function() {
		Org.fillSelect($(this).val(), "#orgCode");
	});
	Rent.fillSelect("#rentCode");
	$("#rentCode").trigger('change');
	
	function addUser() {
		$("#userDiv").append('<div class="form-group">' + 
                '<label for="dvalue" class="col-sm-2 control-label">用户名</label>' + 
                '<div class="col-sm-3">' + 
                '    <input type="text" class="form-control" name="username">' + 
                '</div>' + 
                '<label for="dvalue" class="col-sm-2 control-label">密码</label>' + 
                '<div class="col-sm-3">' + 
                '    <input type="text" class="form-control" name="userpwd">' + 
                '</div>' + 
                '<div class="col-sm-1">' + 
                '    <a class="btn btn-danger" onclick="delUser(this)"><i class="glyphicon-minus"></i></a>' + 
                '</div>' + 
            '</div>')
	}
	
	function delUser(obj) {
		$(obj).closest("div.form-group").detach();
	}
	
    function form_sub() {
    	if(!$("#add_form").valid()) {
    		return;
    	}
        var json = $("#add_form").serializeJson();
        ajaxs("/server", "POST", json, true, function(data) {
    		if(data.state == 'success') {
    			$.CloseFormDialog();
    			$("#serverTable table").bootstrapTable('refresh');
    		} else {
    			layer.msg(data.message);
    		}
        });
    }
    
    $("#add_form").validate({
   		rules: {
	   	    serverName: {
	   	      required: true,
	   	      maxlength: 15
	   	    },
	   	    serverIp: {
	   	    	required: true,
	   	    	maxlength: 15,
	   	    	pattern: '((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}'
	   	    },
	   	    linkPort: {
	   	    	required: true,
	   	    	digits: true
	   	    },
	   	    username: {
	   	    	maxlength: 20,
	   	    	pattern: '[0-9a-zA-Z_]{1,}$'
	   	    },
	   	    userpwd: {
	   	    	maxlength: 20,
	   	    	pattern: '[0-9a-zA-Z_]{1,}$'
	   	    }
	   	    
   	    }
   	});
</script>